<template>
    <div class="account">
        <!-- 背景图 -->
        <!-- 青蒿素 -->
        <div class="translation1"
            :style="{ 'background-image': 'url(' + OSS_URL + (isWebp ? '%E9%9D%92%E8%92%BF%E7%B4%A0.webp' : '%E9%9D%92%E8%92%BF%E7%B4%A0.gif') + ')' }">
        </div>
        <div class="green"></div>
        <div class="yellow"></div>
        <div class="pink"></div>
        <div class="blue"></div>

        <div class="form-box">
            <account-header></account-header>
            <slot></slot>
        </div>
    </div>
</template>

<script>
import { OSS_URL } from '@/utils/URL'
import accountHeader from "@/components/common/account/components/logo.vue"
export default {
    components: {
        accountHeader
    },
    data() {
        return {
            OSS_URL: OSS_URL
        }
    },
    computed: {
        isWebp() {
            return this.$store.state.webp
        }
    }
}
</script>


<style lang="less" scoped>
.account {
    width: 51.2rem;
    height: 28.8rem;
    min-height: 100vh;
    background: linear-gradient(137deg, #F0F0F0 0%, #E9E5F0 100%);
    position: relative;

    .translation1 {
        width: 18.56rem;
        height: 16.05rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right;
        position: absolute;
        top: 9.68rem;
        left: 0.75rem;
    }

    .green {
        width: 11.25rem;
        height: 7.97rem;
        background: url('@/assets/img/account/green.png') no-repeat;
        background-size: cover;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .yellow {
        width: 10.35rem;
        height: 10.35rem;
        background: url('@/assets/img/account/yellow.png') no-repeat;
        background-size: cover;
        position: absolute;
        left: 14.8rem;
        bottom: 2.03rem;
    }

    .pink {
        width: 6.13rem;
        height: 5.23rem;
        background: url('@/assets/img/account/pink.png') no-repeat;
        background-size: cover;
        position: absolute;
        left: 45.07rem;
        top: 0rem;
    }

    .blue {
        width: 12.13rem;
        height: 6.24rem;
        background: url('@/assets/img/account/blue.png') no-repeat;
        background-size: cover;
        position: absolute;
        right: 4.37rem;
        bottom: 0;
    }

    .form-box {
        min-width: 16rem;
        height: 100%;
        position: absolute;
        left: 25.6rem;
        top: 0;
    }
}
</style>